import React, { ReactNode } from "react";
import User from "./User";
import { existBlockUser, USER_LIST_KEY } from "./utils";
interface IProps { user: User, isBlocked: boolean }

interface IState { user: User, isBlocked: boolean }

export default class BlockMaskComponent extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            user: props.user,
            isBlocked: props.isBlocked
        };
    }

    componentDidMount() {
        // 监听屏蔽列表的改变
        chrome.storage.onChanged.addListener(async (changes, namespace) => {
            for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
                if (key == USER_LIST_KEY) {
                    // 判断当前user是否在block list中
                    let isBlocked = await existBlockUser(this.state.user.id);
                    this.setState({ isBlocked: isBlocked });
                }
                // console.log(
                //     `Storage key "${key}" in namespace "${namespace}" changed.`,
                //     `Old value was "${oldValue}", new value is "${newValue}".`
                // );
            }
        });
    }

    // 渲染遮罩层
    public render(): ReactNode {
        return (
            <div style={{
                position: "absolute",
                color: "#ff0000aa",
                fontSize: 100,
                background: "#00000055",
                width: "100%",
                height: "100%",
                textAlign: "center",
                top: 0,
                left: 0,
                zIndex: 999,
                display: this.state.isBlocked ? "block" : "none"
            }}>沙雕发言</div>
        )
    }
}